#{extends 'main.html' /} #{set title:'Shopping cart' /}
<div class="row-fluid">
	<div class="span9 offset1">
		<h3>Shopping cart:</h3>
		<table class="table table-bordered">
			<thead>
				<th>Restaurant</th>
				<th>Dish</th>
				<th>Price</th>
				<th>Quantity</th>
				<th>Total</th>
				<th>Edit</th>
				<th>Delete</th>
			</thead>
			<tbody>
				#{list items:shop_order.order_items, as:'order'}
				<tr>
					<td>${order.dish.restaurant.name}</td>
					<td>${order.dish.name}</td>
					<td>€${order.dish.price}</td>
					<td><input id="${'input_' + order.id}" disabled="true"
						type="number" value="${order.qty}" min="1" max="1000"></td>
					<td>€${Math.round(order.dish.price * order.qty *
						100)/100.0d}</td>
					<td><input id="${'edit_' + order.id}" class="edit"
						type="button" value="Edit" onClick="toggle('${order.id}')"></td>
					<td><a
						href="@{Application.removeOrderItem(shop_order.id, order.id)}">Delete</a></td>
				</tr>
				#{/list}
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td align="right">Total price:</td>
					<td>€${Math.round(shop_order.totalPrice * 100)/100.00d}</td>
				</tr>
			</tbody>
		</table>
		<div id="resturant" class="pull-right">
			<a href="@{application.shopping()}"><input
				class="btn btn-small btn-primary" type="button"
				value="Go back to shopping"></a> <a
				href="@{application.checkout()}"><input
				class="btn btn-small btn-primary" type="button" value="Check out"></a>
				</br>
				</br>
				</br>
		</div>


		<script type="text/javascript">
	function toggle(orderID) {
  		var input = document.getElementById("input_" + orderID);
  		var edit = document.getElementById("edit_" + orderID);
  		if (input.disabled){
  			input.disabled=false;
  			edit.value="Save";
  		}
  		else{
  			input.disabled=true;
  			edit.value="Edit";
  			var shopId = "${shop_order.id}";
  			var quantity = input.value;
  			var url = #{jsAction @application.editShoppingOrder(':shopOrderId', ':orderID', ':qty') /}
	        $.get(
		       url({shopOrderId: shopId, orderID: orderID, qty: quantity}), 
		       function() {
           		
       		})
  		} 
	}
	
</script>
	</div>
</div>